<template>
  <div class="time-picker-contoiner">
    <div class="time-picker-title">
      <p class="time-picker-title-cancel" @click="cancelClick">取消</p>
      <p class="time-picker-title-p">选择时间</p>
      <p class="time-picker-title-ok" @click="okClick">确定</p>
    </div>
    <Picker :slots="addressSlots" value-key="name" @change="onValuesChange"></Picker>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui'

  export default {
    name: 'time-picker',
    components: {
      Picker
    },
    props: {
      timeList: {
        type: Array,
        default: function () {
          return []
        }
      },
      firstIndex: 0,
      secondIndex: 0
    },
    data () {
      return {
        seletedTimeList: [],
        addressSlots: [
          {
            flex: 1,
            values: this.$props.timeList,
            defaultIndex: this.$props.firstIndex,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: this.$props.timeList[0].childs,
            defaultIndex: this.$props.secondIndex,
            className: 'slot3',
            textAlign: 'center'
          }
        ],
        myAdress: null
      }
    },
    computed: {
    },
    methods: {
      onValuesChange(picker, values) {
        picker.setSlotValues(1, values[0].childs)
        this.seletedTimeList = values
      },
      cancelClick () {
//        this.$props.isShow = false
        this.$emit('pick-click', false)
      },
      okClick () {
//        this.$props.isShow = false
        console.log(this.seletedTimeList)
        this.$emit('pick-click', {
          isShow: false,
          firstTime: this.seletedTimeList[0].name,
          secondTime: this.seletedTimeList[1].name
        })
      }
    },
    watch: {
      timeList (newValue, oldValue) {
        let resaultTimeList = []
        for (let item of newValue) {
          let childrenList = []
          for (let childItem of item.times) {
            childrenList.push({
              name: childItem
            })
          }
          let resaultItem = {
            name: item.day,
            childs: childrenList
          }
          resaultTimeList.push(resaultItem)
        }
        console.log('timeList')
        console.log(resaultTimeList)
      }
    },
    created () {
    },
    activated () {
      console.log('activated')
    }
  }
</script>

<style lang="scss">
  div.time-picker-contoiner {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 66;
    position: fixed;

    >div.time-picker-title {
      position: absolute;
      padding: 0 15px 0 15px;
      width: 100%;
      height: 44px;
      bottom: 180px;
      background-color: rgb(233, 233, 233);

      >p.time-picker-title-cancel {
        float: left;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
      }
      >p.time-picker-title-p {
        top: -50%;
        left: -50%;
        transform: translate(50%, 50%);
        position: absolute;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
      }
      >p.time-picker-title-ok {
        float: right;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
      }
    }

    >div.picker {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: white;

      div {
        font-size: 14px;
      }
    }
  }
</style>
